<template>
	<div class="ele-body">
		<el-card shadow="never" body-style="padding-bottom:0;">
			<el-row :gutter="15">
				<el-col :md="14" style="margin-bottom:15px;">
					<!-- 搜索表单 -->
					<el-form :model="table.where" class="ele-form-search ele-table-tool-default" size="mini" @keyup.enter.native="$refs.table.reload()" @submit.native.prevent>
						<el-row :gutter="15">
							<el-col :md="6" :sm="12">
								<el-form-item><el-input v-model="table.where.mc" placeholder="请输入名称" clearable size="mini" /></el-form-item>
							</el-col>
							<el-col :md="12" :sm="12">
								<div class="ele-form-actions">
									<el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search" class="ele-btn-icon" size="mini">查询</el-button>
									<el-button @click="add()" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="mini">添加</el-button>
									<el-button @click="edit()" type="warning" icon="el-icon-edit" class="ele-btn-icon" :disabled="!current" size="mini">修改</el-button>
									<el-button @click="remove()" type="danger" icon="el-icon-delete" class="ele-btn-icon" :disabled="!current" size="mini">删除</el-button>
								</div>
							</el-col>
						</el-row>
					</el-form>
					<!-- 数据表格 -->
					<ele-data-table ref="table" :config="table" :current.sync="current" @done="done" highlight-current-row :height="tbHeight" class="dict-table">
						<!-- <el-table-column type="index" width="45" align="center" /> -->
						<el-table-column prop="bh" label="编号" sortable="custom" show-overflow-tooltip min-width="100"></el-table-column>
						<el-table-column prop="mc" label="名称" sortable="custom" show-overflow-tooltip min-width="150"></el-table-column>
						<el-table-column prop="pz1" label="值1" sortable="custom" show-overflow-tooltip min-width="130"></el-table-column>
						<el-table-column prop="pz2" label="值2" sortable="custom" show-overflow-tooltip min-width="120"></el-table-column>
						<el-table-column prop="pz3" label="值3" sortable="custom" show-overflow-tooltip min-width="120"></el-table-column>
						<el-table-column prop="seq" label="排序" sortable="custom" show-overflow-tooltip min-width="70"></el-table-column>
						<el-table-column prop="remark" label="备注" sortable="custom" show-overflow-tooltip min-width="120"></el-table-column>
						<el-table-column label="创建时间" sortable="custom" show-overflow-tooltip min-width="110">
							<template slot-scope="{ row }">
								{{ row.createtime | toDateString }}
							</template>
						</el-table-column>
					</ele-data-table>
				</el-col>
				<el-col :md="10" style="margin-bottom:15px;"><pz-data v-if="current" :mid="current.id" :tb-height="tbHeight" /></el-col>
			</el-row>
		</el-card>
		<!-- 编辑弹窗 -->
		<el-dialog
			:title="editForm.id ? '修改' : '添加'"
			:visible.sync="showEdit"
			width="400px"
			@closed="editForm = {}"
			:destroy-on-close="true"
			:lock-scroll="false"
			:close-on-click-modal="false"
		>
			<el-form :model="editForm" ref="editForm" :rules="editRules" label-width="82px">
				<el-form-item label="编号:" prop="bh"><el-input v-model="editForm.bh" placeholder="请输入编号" clearable /></el-form-item>
				<el-form-item label="名称:" prop="mc"><el-input v-model="editForm.mc" placeholder="请输入名称" clearable /></el-form-item>
				<el-form-item label="值1:" prop="pz1"><el-input v-model="editForm.pz1" placeholder="请输入值1" clearable /></el-form-item>
				<el-form-item label="值2:" prop="pz2"><el-input v-model="editForm.pz2" placeholder="请输入值2" clearable /></el-form-item>
				<el-form-item label="值3:" prop="pz3"><el-input v-model="editForm.pz3" placeholder="请输入值3" clearable /></el-form-item>
				<el-form-item label="排序号:" prop="seq">
					<el-input-number v-model="editForm.seq" controls-position="right" :min="0" placeholder="请输入排序号" class="ele-fluid ele-text-left" />
				</el-form-item>
				<el-form-item label="备注:"><el-input v-model="editForm.remark" placeholder="请输入备注" :rows="4" type="textarea" /></el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="showEdit = false">取消</el-button>
				<el-button type="primary" @click="save">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import PzData from './pz-data';
export default {
	name: 'ScmPz',
	components: { PzData },
	data() {
		return {
			table: { url: '/scm/base/pz/page', page: true, where: {} }, // 表格配置
			current: null, // 表格选中数据
			showEdit: false, // 是否显示表单弹窗
			editForm: {}, // 表单数据
			editRules: {
				// 表单验证规则
				bh: [{ required: true, message: '请输入编号', trigger: 'blur' }],
				mc: [{ required: true, message: '请输入名称', trigger: 'blur' }],
				pz1: [{ required: true, message: '请输入值1', trigger: 'blur' }],
				seq: [{ required: true, message: '请输入排序号', trigger: 'blur' }]
			}
		};
	},
	computed: {
		/* 表格固定高度 */
		tbHeight() {
			return this.$store.state.theme.screenWidth < 992 ? undefined : 'calc(100vh - 240px)';
		}
	},
	methods: {
		/* 表格渲染完成回调 */
		done(res) {
			if (res.data.length > 0) this.$refs.table.setCurrentRow(res.data[0]);
		},
		/* 显示新增 */
		add() {
			this.editForm.seq = 0; //默认排序号0
			this.showEdit = true;
		},
		/* 显示编辑 */
		edit() {
			this.editForm = Object.assign({}, this.current);
			this.showEdit = true;
		},
		/* 保存编辑 */
		save() {
			this.$refs['editForm'].validate(valid => {
				if (valid) {
					const loading = this.$loading({ lock: true });
					const posturl = this.editForm.id ? '/scm/base/pz/update' : '/scm/base/pz/add';
					this.$http
						.post(posturl, this.editForm)
						.then(res => {
							loading.close();
							if (res.data.code === 0) {
								this.showEdit = false;
								this.$message({ type: 'success', message: res.data.msg });
								this.$refs.table.reload();
							} else {
								this.$message.error(res.data.msg);
							}
						})
						.catch(e => {
							loading.close();
							this.$message.error(e.message);
						});
				} else {
					return false;
				}
			});
		},
		/* 删除 */
		remove() {
			this.$confirm('确定要删除选中行数据吗?', '提示', { type: 'warning' })
				.then(() => {
					const loading = this.$loading({ lock: true });
					this.$http
						.post('/scm/base/pz/remove?id=' + this.current.id)
						.then(res => {
							loading.close();
							if (res.data.code === 0) {
								this.$message({ type: 'success', message: res.data.msg });
								this.$refs.table.reload();
							} else {
								this.$message.error(res.data.msg);
							}
						})
						.catch(e => {
							loading.close();
							this.$message.error(e.message);
						});
				})
				.catch(() => 0);
		}
	}
};
</script>

<style scoped>
.dict-table >>> .el-table__row {
	cursor: pointer;
}

.dict-table >>> .el-table__row > td:last-child:after {
	content: '\e6e0';
	font-family: element-icons !important;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -7px;
}

.dict-table >>> .el-table__row > td:last-child .cell {
	padding-right: 20px;
}
</style>
